<template>
	<view class="line">
		<!-- 搜索栏 -->
		<view class="p-search-box">
			<view class="p-search">
				<u-icon name="e61e" size="48" color="#999999" custom-prefix="iconfont" />
				<input class="p-search-ipt" type="text" v-model='searchIpt' placeholder="请输入搜索内容" />
			</view>
			<view class="p-add" @click="onEdit(false)">
				<image src="../static/add.jpg" class="p-add-image" />
				<view class="p-add-title">新增</view>
			</view>
		</view>
		<!-- tabs选择栏 -->
		<u-tabs :list="tabList" height='66' :current="current" @change="onChangeTab"></u-tabs>
		<template v-if="dataList[0]">
			<!-- 产品展示 -->
			<view class="product" >
				<view class="product-item" v-for="(item,index) in dataList" :key='index'>
					<view class="pi-top">
						<view class="product-item-center">
							<view class="product-item-center-name u-line-2">{{item.name}} </view>
							<view class="product-stock">
								<template v-if="item.travelagency_name">
									<view class="product-stock-number">所属旅行社：{{item.travelagency_name}}</view>
								</template>
								<view class="product-stock-number">上车地点：{{item.aboard_count || 0}}</view>
								<view class="product-stock-number">酒店：{{item.hotel_count || 0}}</view>
								<view class="product-stock-number">线路数据：{{item.route_count || 0}}</view>
								<view class="product-stock-number">库存：{{item.stock_count || 0}}</view>
							</view>
						</view>
					</view>
					<view class="product-item-right">
						<view class="pro-down-up">
							<view class="pro-down-up-title" :class="{'pro-down-up-active':item.is_online==0?false:true}"
								@click="onDpwnUp(index,1)">
								上架
							</view>
							<view class="pro-down-up-title" :class="{'pro-down-up-active':item.is_online==1?false:true}"
								@click="onDpwnUp(index,0)">
								下架
							</view>
						</view>
						<view class="btn-box">
							<view class="product-fun" @click="onEdit(item.pk_id)">
								<image class="fun-icon" src="../static/ic_2.png" mode=""></image>
								<text>编辑</text>
							</view>
							<view class="product-fun" @click="onInventory(item.pk_id)">
								<image class="fun-icon" src="../static/ic_3.png" mode=""></image>
								<text>库存</text>
								</view>
							<view class="product-fun" style="margin-right: 0;" @click="onDel(item.pk_id)">
								<image class="fun-icon" style="width: 32rpx;" src="../static/ic_1.png" mode=""></image>
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		
		<template v-else>
			<view class="empty">
				<u-empty text="暂无数据" mode="list"/>
			</view>
		</template>
		
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js'
	import {uniModal,uniToast} from '@/utils/uniPromise.js'
	export default {
		mixins:[pagingMixin],
		data(){
			return{
				searchIpt: '',
				dpwnUpList: [{
						name: '上架',
						value: 1
					},
					{
						name: '下架',
						value: 0
					}
				],
				tabList:[],
				current:0,
				InterfaceParams: {
					type: -1,
					fk_business_id: '',
					name: ''
				},
			}
		},
		watch: {
			searchIpt(news) {
				this.InterfaceParams.name = news
				this._init_data('GetTouristProList', {
					...this.InParams
				})
			}
		},
		computed: {
			InParams() {
				let params = {
					...this.InterfaceParams
				}
				return params
			}
		},
		onShow(){
			this.initPage()
		},
		methods:{
			initPage() {
				this.InterfaceParams.fk_business_id = this.vuex_adminuser.pk_id
				let params = {
					type: 1,
					parents: 0,
					fk_business_id: this.vuex_adminuser.pk_id
				}
				this.$GetQueryDataList('m_common_classify', 4, 9999, {
					...params
				}, {
					sort: 'sort asc,pk_id desc'
				}).then(res => {
					let arr =[{
					name: '全部',
					value: -1
				}]
					res.data.forEach(el => {
						arr.push({
							name: el.name,
							value: Number(el.pk_id)
						})
					})
					this.tabList = arr
				})
			
				this._init_data('GetTouristProList', {
					...this.InParams
				})
			
			},
			onChangeTab(index) {
				this.current = index;
				this.InterfaceParams.type = this.tabList[index].value //获取产品类型ID
				this._init_data('GetTouristProList', {
					...this.InParams
				})
			},
			onDpwnUp(index, el) {
				this.$loading('请稍等')
				this.$set(this.dataList[index], 'is_online', el)
				let params = {
					is_online: el,
					pk_id: this.dataList[index].pk_id
				}
				this.$UpdateModify('b_travelagency_pro', {
					...params
				}).then(res => {
					this.initPage()
					this.$hide()
					this.$toast(el == 1 ? '上架成功' : '下架成功')
				})
			
			},
			onInventory(id){
				this.$linkTo(`/package/system/line/stock/index?id=${id}`)
			},
			onEdit(pk_id) {
				if(pk_id){
					this.$linkTo(`/package/system/line/edit/index?id=${pk_id}`)
				}else{
					this.$linkTo(`/package/system/line/edit/index`)
				}
			},
			onDel(id){
				uniModal({
					content:'确定删除该条商品'
				}).then(res=>{
					if(res== 'success'){
						this.$DeleteManagerData(18,id).then((res)=>{
							uniToast(res.msg)
							this.initPage()
						})
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line{
		.p-search-box {
			display: flex;
			width: 100%;
			height: 108rpx;
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f5f5f5;
		
			// 搜索左边布局
			.p-search {
				display: flex;
				padding: 0 20rpx;
				box-sizing: border-box;
				width: 570rpx;
				height: 68rpx;
				background: #EDEDED;
				border-radius: 8rpx;
				margin-right: 20rpx;
		
				.p-search-ipt {
					width: 100%;
					height: 100%;
				}
			}
		
			// 搜索右边布局
			.p-add {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				.p-add-title {
					font-size: 26rpx;
					font-weight: 500;
					color: #222222;
				}
		
				.p-add-image {
					width: 33rpx;
					height: 34rpx;
					margin-right: 12rpx;
				}
			}
		
		}
		.btn-box{
			display: flex;
			align-items: center;
		}
		.pi-top{
			display: flex;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #f1f1f1;
			margin-bottom: 20rpx;
		}
		// 产品展示
		.product {
			width: 100%;
			min-height: 100vh;
			background-color: #f5f5f5;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
		
			.product-img {
				position: relative;
				width: 178rpx;
				height: 178rpx;
				margin-right: 21rpx;
				border-radius: 10rpx;
			}
		
			.product-item {
				display: flex;
				background-color: #fff;
				padding: 22rpx;
				box-sizing: border-box;
				flex-direction: column;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
		
				.product-item-center {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 100%;
					font-size: 28rpx;
					font-weight: bold;
					color: #002222;
		
					.product-item-center-name {
						font-size: 32rpx;
						font-weight: bold;
						color: #002222;
						margin-bottom: 10rpx;
					}
		
					.product-stock-number {
						font-size: 26rpx;
						font-weight: 500;
						color: #999999;
					}
		
					.product-stock-price {
						margin-right: 20rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #FF0E0E;
					}
				}
			}
			.product-stock{
				display: flex;
				flex-direction: column;
			}
			.product-item-right {
				display: flex;
				// flex-direction: column;
				align-items: center;
				justify-content: space-between;
		
				.pro-down-up {
					display: flex;
					width: 150rpx;
					height: 46rpx;
					line-height: 44rpx;
					border-radius: 4rpx;
					box-sizing: border-box;
					border: 1px solid #3297EF;
		
					.pro-down-up-title {
						flex: 1;
						color: #3297EF;
						font-size: 26rpx;
						text-align: center;
					}
		
					.pro-down-up-active {
						color: #fff;
						background-color: #3297EF;
					}
				}
		
				.product-fun {
					// width: 120rpx;
					text-align: center;
					// line-height: 46rpx;
					margin-right: 20rpx;
					height: 46rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #999;
					.fun-icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		
		
		.empty {
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			margin: 0 auto;
		}
		
	}
</style>
